<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model.trim="query.lineName"
        placeholder="产线名称"
        style="width: 130px;"
        clearable
        class="filter-item"
        @keyup.enter.native="search"
      />
      <el-input
        v-model.trim="query.pName"
        placeholder="上级产线"
        style="width: 130px;"
        clearable
        class="filter-item"
        @keyup.enter.native="search"
      />
      <el-input
        v-model.trim="query.lineCode"
        clearable
        placeholder="产线编号"
        style="width: 130px;"
        class="filter-item"
        @keyup.enter.native="search"
      />
      <el-button
        style="margin-left:20px;"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="search"
      >{{ $t('table.search') }}</el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleAdd"
      >{{ $t('table.add') }}</el-button>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      highlight-current-row
      border
    >
      <el-table-column prop="id" label="产线id" sortable />
      <el-table-column prop="lineName" label="产线名称" sortable />
      <el-table-column prop="lineCode" label="产线编号" sortable />
      <el-table-column prop="lineDesc" label="描述" sortable />
      <el-table-column prop="lineType" label="产线类型">
        <template slot-scope="{row,$index}">
          <span v-if="row.lineType==1">工厂</span>
          <span v-if="row.lineType==2">车间</span>
          <span v-if="row.lineType==3">产线</span>
          <span v-if="row.lineType==4">工位</span>
        </template>
      </el-table-column>

      <el-table-column prop="plineName" label="上级产线" sortable />
      <el-table-column prop="iorder" label="产线顺序号" sortable />
      <el-table-column :label="$t('table.actions')" align="center">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">{{ $t('table.edit') }}</el-button>
          <el-button
            v-if="row.status!='deleted'"
            size="mini"
            type="danger"
            @click="handleDelete(row,$index)"
          >{{ $t('table.delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-show="total>0"
      style="margin-top:20px;"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑产线':'新增产线'" width="650px">

      <el-form ref="form" :model="moplineManager" :rules="rules" label-width="120px">
        <el-form-item label="产线名称" prop="lineName">
          <el-input v-model.trim="moplineManager.lineName" placeholder="产线名称" />
        </el-form-item>
        <el-form-item label="产线编号" prop="lineCode">
          <el-input v-model.trim="moplineManager.lineCode" placeholder="产线编号" width="100" />
        </el-form-item>
        <el-form-item label="产线描述" prop="lineDesc">
          <el-input v-model.trim="moplineManager.lineDesc" placeholder="产线描述" />
        </el-form-item>
        <el-form-item label="产线类型" prop="lineType">
          <el-select
            v-model="moplineManager.lineType"
            clearable
            placeholder="请选择产线类型"
            class="filter-item"
            style="width: 130px"
            @change="getdata"
          >
            <el-option
              v-for="item in listType"
              :key="item.val"
              :label="`${item.name}`"
              :value="item.val"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上级产线" prop="pid">
          <el-select
            v-model="moplineManager.pid"
            clearable
            placeholder="请选择上级产线"
            class="filter-item"
            style="width: 130px"
            :disabled="show"
            @change="selectTrigger"
          >
            <el-option
              v-for="item in items"
              :key="item.id"
              :label="`${item.lineName}`"
              :value="item.id"
            />
          </el-select>
          <!--<span style="color:#999;font-size:14px;">(注:选择完产线类型才能选择上级产线)</span>-->
        </el-form-item>
        <el-form-item label="产线顺序号" prop="iorder">
          <el-input v-model="moplineManager.iorder" maxlength="3" :disabled="showiorder" oninput="value=value.replace(/^0|[^0-9]/g, '')" type="text" placeholder="顺序号" />
        </el-form-item>
        <el-form-item label="是否是包装工位:" prop="stationType">
          <el-radio-group v-model="moplineManager.stationType">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
          <span style="margin-left:30px;color:red;font-size: 20px">注：包装工位不显示在看板</span>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">{{ $t('permission.cancel') }}</el-button>
        <el-button type="primary" @click="confirm">{{ $t('permission.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getMopLine, update, add, deleteInfo, upper, getDownOrder } from '@/api/moplineManager'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { deepClone } from '../../../utils'
const moplineManager = {
  stationType: 0,
  lineType: '',
  plineName: '',
  lineCode: '',
  lineName: '',
  lineDesc: '',
  pid: '',
  firstlineName: '',
  iorder: ''
}

export default {
  name: 'MoplineManager',
  data() {
    return {
      show: true,
      items: [],
      listType: [{
        name: '工厂',
        val: '1'

      }, {
        name: '车间',
        val: '2'

      }, {
        name: '产线',
        val: '3'

      }, {
        name: '工位',
        val: '4'

      }],
      value: '',
      total: 0,
      currentPage: 1,
      pagesize: 10,
      query: {
      // pageIndex: 1,
      //   pageSize: 20,
        lineName: ''

      },
      rules: {
        iorder: [
          { required: true, message: '请输入产线编号', trigger: 'blur' }
        ],
        lineCode: [
          { required: true, message: '请输入产线编号', trigger: 'blur' }
        ],
        lineDesc: [
          { required: true, message: '请输入产线描述', trigger: 'blur' }
        ],
        lineName: [
          { required: true, message: '请输入产线名称', trigger: 'blur' }
        ],
        lineType: [
          { required: true, message: '请选择产线类型', trigger: 'blur' }
        ]
      },
      moplineManager: Object.assign({}, moplineManager),
      dialogVisible: false,
      dialogType: 'new',
      tableData: [],
      loading: true,
      showiorder: false
    }
  },
  created() {
    this.MopLine()
  },
  methods: {

    getdata(e) {
      this.moplineManager.pid = ''
      this.moplineManager.plineName = ''
      console.log('e', e)
      if (e != '1' && e != '2' && e != '3' && e != '4') {
        this.items = []
        return false
      } else {
        upper(e).then((res) => {
          this.items = res.data
          this.show = false
        })
      }
      this.showiorder = false
      this.moplineManager.iorder = ''
    },
    selectTrigger: function(e) {
      console.log(e)
      this.moplineManager.pid = e
      getDownOrder(e).then((res) => {
        this.moplineManager.iorder = res.data
        this.showiorder = true
      })
    },
    search() {
      this.currentPage = 1
      this.MopLine()
    },
    update() {
      update(this.moplineManager).then((res) => {
        if (res.isSuccess) {
          this.dialogVisible = false
          this.$notify({
            title: '成功',
            dangerouslyUseHTMLString: true,
            message: `修改成功`,
            type: 'success'
          })

          this.MopLine()
        } else {
          this.$notify({
            title: '失败',
            dangerouslyUseHTMLString: true,
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    handleDelete(row, $index) {
      this.$confirm('确认删除?', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await deleteInfo(row.id)
        this.MopLine()
        this.tableData.splice($index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(err => console.error(err))
    },
    handleUpdate(row) {
      this.moplineManager = Object.assign({}, moplineManager)
      this.show = true
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.moplineManager = deepClone(row)
      this.showiorder = false
      console.log(row)
      if (row.pid == '0') {
        console.log(1111111)
        this.moplineManager.pid = ''
      }
      if (this.moplineManager.lineType) {
        upper(this.moplineManager.lineType).then((res) => {
          this.items = res.data
          this.show = false
        })
      } else {
        this.items = []
      }
    },
    add() {
      add(this.moplineManager).then((res) => {
        if (res.isSuccess) {
          this.dialogVisible = false
          this.$notify({
            title: '成功',
            dangerouslyUseHTMLString: true,
            message: `修改成功`,
            type: 'success'
          })

          this.MopLine()
        } else {
          this.$notify({
            title: '失败',
            dangerouslyUseHTMLString: true,
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    handleSizeChange: function(size) {
      this.pagesize = size
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
    },
    async confirm() {
      let validResult = true

      this.$refs.form.validate(valid => {
        validResult = valid
      })

      if (!validResult) return

      const isEdit = this.dialogType === 'edit'

      if (isEdit) {
        await this.update()
      } else {
        await this.add()
      }
    },

    handleAdd() {
      this.show = true
      this.moplineManager = Object.assign({}, moplineManager)
      this.dialogType = 'new'
      this.dialogVisible = true
    },
    MopLine() {
      this.loading = true
      const obj = deepClone(this.query)
      if (!this.query.lineCode) {
        delete obj.lineCode
      }
      if (!this.query.pName) {
        delete obj.pName
      }
      if (!this.query.lineName) {
        delete obj.lineName
      }
      getMopLine(obj).then((res) => {
        console.log(res)
        this.loading = false
        this.total = res.data.total
        this.tableData = res.data.list
      })
    }

  }
}
</script>
